<template>
  <el-container class="main_con">
    <div class="index_header" ref="header">
      <div class="item">
        <img src="@/assets/images/index/Shape1.png" />
        <div class="data">
          <div class="num">
            <el-link href="#/order/list/todelivered" :underline="false"><countTo :startVal="0" :endVal="resTop.consignment" :duration="3000" :decimals="0"></countTo></el-link>
          </div>
        </div>
      </div>
      <div class="item">
        <img src="@/assets/images/index/Shape2.png" />
        <div class="data">
          <div class="num">
            <el-link href="#/order/list/towritten" :underline="false"><countTo :startVal="0" :endVal="resTop.stay_write_off" :duration="3000" :decimals="0"></countTo></el-link>
          </div>
        </div>
      </div>
      <div class="item">
        <img src="@/assets/images/index/Shape3.png" />
        <div class="data">
          <div class="num">
            <el-link href="#/order/list/after?after_status=1" :underline="false"><countTo :startVal="0" :endVal="resTop.after_sales" :duration="3000" :decimals="0"></countTo></el-link>
          </div>
        </div>
      </div>
      <div class="item">
        <img src="@/assets/images/index/Shape4.png" />
        <div class="data">
          <div class="num">
            <el-link href="#/product/list/listStock" :underline="false"><countTo :startVal="0" :endVal="resTop.warehouse" :duration="3000" :decimals="0"></countTo></el-link>
          </div>
        </div>
      </div>
      <div class="item">
        <img src="@/assets/images/index/Shape5.png" />
        <div class="data">
          <div class="num">
            <el-link href="#/product/list/sellout" :underline="false"><countTo :startVal="0" :endVal="resTop.sold_out" :duration="3000" :decimals="0"></countTo></el-link>
          </div>
        </div>
      </div>
    </div>

    <el-row :gutter="20">
      <el-col :span="18">
        <el-container class="index_main">
          <div class="main_header"><div class="title">今日数据汇总</div></div>
          <div class="main_cates todaydata">
            <div class="item" v-for="(item, i) in todaylist" :key="i">
              <div class="t_icon_box" :style="'background:' + item.bg"><i :style="'color:' + item.color" :class="item.icon"></i></div>
              <div class="text_box">
                <span>{{ item.name }}</span>
                <span>{{ unifieddata[item.value] || 0 }}</span>
              </div>
            </div>
          </div>
        </el-container>
        <el-container class="index_main">
          <div class="main_header">
            <div class="title">数据汇总</div>
            <div class="filter">
              <div class="switch_tab">
                <span @click="obj.date_format = 'day'" :class="obj.date_format == 'day' ? 'active' : ''">日</span>
                <span @click="obj.date_format = 'month'" :class="obj.date_format == 'month' ? 'active' : ''">月</span>
                <span @click="obj.date_format = 'year'" :class="obj.date_format == 'year' ? 'active' : ''">年</span>
              </div>
              <!-- <el-radio-group size="medium" v-model="obj.date_format">
                <el-radio-button label="day">日</el-radio-button>
                <el-radio-button label="month">月</el-radio-button>
                <el-radio-button label="year">年</el-radio-button>
              </el-radio-group> -->
              <date-picker
                size="medium"
                :default="[
                  this.$moment(new Date())
                    .add(-7, 'd')
                    .format('YYYY-MM-DD'),
                  this.$moment(new Date()).format('YYYY-MM-DD')
                ]"
                @change="getTime"
                style="margin-left:20px;"
              ></date-picker>
              <!-- <el-button size="medium" style="margin-left:20px" @click="getData">查询</el-button> -->
            </div>
          </div>
          <div class="main_cates">
            <div class="cates">
              <div @click="selectField('avg_money')" :class="obj.field == 'avg_money' ? 'selected cate' : 'cate'">
                <div class="name">笔单价(元)</div>
                <div class="num"><countTo :startVal="0" :endVal="resTotal.avg_money" :duration="3000" :decimals="2"></countTo></div>
              </div>
              <div @click="selectField(' total_pay_order_number')" :class="obj.field == ' total_pay_order_number' ? 'selected cate' : 'cate'">
                <div class="name">订单数(单)</div>
                <div class="num"><countTo :startVal="0" :endVal="resTotal.total_pay_order_number" :duration="3000" :decimals="0"></countTo></div>
              </div>
              <div @click="selectField('total_money')" :class="obj.field == 'total_money' ? 'selected cate' : 'cate'">
                <div class="name">订单金额(元)</div>
                <div class="num"><countTo :startVal="0" :endVal="resTotal.total_money" :duration="3000" :decimals="2"></countTo></div>
              </div>
              <div @click="selectField('avg_user_money')" :class="obj.field == 'avg_user_money' ? 'selected cate' : 'cate'">
                <div class="name">客单价(元)</div>
                <div class="num"><countTo :startVal="0" :endVal="resTotal.avg_user_money" :duration="3000" :decimals="2"></countTo></div>
              </div>
              <div @click="selectField('number')" :class="obj.field == 'number' ? 'selected cate' : 'cate'">
                <div class="name">支付人数(人)</div>
                <div class="num"><countTo :startVal="0" :endVal="resTotal.number" :duration="3000" :decimals="0"></countTo></div>
              </div>
              <div @click="selectField('new_user_number')" :class="obj.field == 'new_user_number' ? 'selected cate' : 'cate'">
                <div class="name">新增用户(人)</div>
                <div class="num"><countTo :startVal="0" :endVal="resTotal.new_user_number" :duration="3000" :decimals="0"></countTo></div>
              </div>

              <div @click="selectField('pv')" :class="obj.field == 'pv' ? 'selected cate' : 'cate'">
                <div class="name">pv</div>
                <div class="num"><countTo :startVal="0" :endVal="resTotal.pv" :duration="3000" :decimals="0"></countTo></div>
              </div>
              <div @click="selectField('uv')" :class="obj.field == 'uv' ? 'selected cate' : 'cate'">
                <div class="name">uv</div>
                <div class="num"><countTo :startVal="0" :endVal="resTotal.uv" :duration="3000" :decimals="0"></countTo></div>
              </div>
              <div @click="selectField('fission_number')" :class="obj.field == 'fission_number' ? 'selected cate' : 'cate'">
                <div class="name">分裂人数</div>
                <div class="num"><countTo :startVal="0" :endVal="resTotal.fission_number" :duration="3000" :decimals="0"></countTo></div>
              </div>

              <div @click="selectField('fission_click')" :class="obj.field == 'fission_click' ? 'selected cate' : 'cate'">
                <div class="name">分裂点击</div>
                <div class="num"><countTo :startVal="0" :endVal="resTotal.fission_click" :duration="3000" :decimals="0"></countTo></div>
              </div>
              <div @click="selectField('refund_number')" :class="obj.field == 'refund_number' ? 'selected cate' : 'cate'">
                <div class="name">退款单数(单)</div>
                <div class="num"><countTo :startVal="0" :endVal="resTotal.refund_number" :duration="3000" :decimals="0"></countTo></div>
              </div>

              <div @click="selectField('refund_money')" :class="obj.field == 'refund_money' ? 'selected cate' : 'cate'">
                <div class="name">退款金额(元)</div>
                <div class="num"><countTo :startVal="0" :endVal="resTotal.refund_money" :duration="3000" :decimals="2"></countTo></div>
              </div>
            </div>
            <el-container class="charts" v-loading="isLoadingChart"><div class="dcs" id="dcs"></div></el-container>
          </div>
        </el-container>
        <el-container class="index_agent">
          <div class="title"><span>我的分销商</span></div>
          <div class="content">
            <div class="item">
              <!-- <img src="https://jzwl365.oss-cn-beijing.aliyuncs.com/2021-02-05/601d029b3f0b0.png" /> -->
              <img src="@/assets/images/index/agent1.png" />
              <div class="data">
                <!-- <div class="name">待发货订单</div> -->
                <div class="num">
                  <el-link href="#/agent/list" :underline="false"><countTo :startVal="0" :endVal="resTop.agent_total" :duration="3000" :decimals="0"></countTo></el-link>
                  <span>人</span>
                </div>
              </div>
            </div>
            <div class="item">
              <!-- <img src="https://jzwl365.oss-cn-beijing.aliyuncs.com/2021-02-05/601d029b3f0b0.png" /> -->
              <img src="@/assets/images/index/agent2.png" />
              <div class="data">
                <!-- <div class="name">待发货订单</div> -->
                <div class="num">
                  <el-link href="#/agent/apply" :underline="false"><countTo :startVal="0" :endVal="resTop.agent_apply" :duration="3000" :decimals="0"></countTo></el-link>
                  <span>人</span>
                </div>
              </div>
            </div>
            <div class="item">
              <!-- <img src="https://jzwl365.oss-cn-beijing.aliyuncs.com/2021-02-05/601d029b3f0b0.png" /> -->
              <img src="@/assets/images/index/agent3.png" />
              <div class="data">
                <!-- <div class="name">待发货订单</div> -->
                <div class="num">
                  <el-link href="#/agent/list" :underline="false"><countTo :startVal="0" :endVal="resTop.agent_amount" :duration="3000" :decimals="2"></countTo></el-link>
                  <span>元</span>
                </div>
              </div>
            </div>
            <div class="item">
              <!-- <img src="https://jzwl365.oss-cn-beijing.aliyuncs.com/2021-02-05/601d029b3f0b0.png" /> -->
              <img src="@/assets/images/index/agent4.png" />
              <div class="data">
                <!-- <div class="name">待发货订单</div> -->
                <div class="num">
                  <el-link href="#/agent/list" :underline="false"><countTo :startVal="0" :endVal="resTop.agent_cash" :duration="3000" :decimals="2"></countTo></el-link>
                  <span>元</span>
                </div>
              </div>
            </div>
            <div class="item">
              <!-- <img src="https://jzwl365.oss-cn-beijing.aliyuncs.com/2021-02-05/601d029b3f0b0.png" /> -->
              <img src="@/assets/images/index/agent5.png" />
              <div class="data">
                <!-- <div class="name">待发货订单</div> -->
                <div class="num">
                  <el-link href="#/agent/list" :underline="false"><countTo :startVal="0" :endVal="resTop.agent_confirm" :duration="3000" :decimals="2"></countTo></el-link>
                  <span>元</span>
                </div>
              </div>
            </div>
          </div>
        </el-container>
      </el-col>
      <el-col :span="6">
        <el-container class="index_rank">
          <div class="bk user">
            <div class="title">
              <div class="name">我的用户</div>
              <!-- <div class="link"><el-link>查看总排行</el-link></div> -->
            </div>
            <div class="rank">
              <div class="item">
                <img src="@/assets/images/index/user1.png" />
                <div class="nums">
                  <span>用户总人数:</span>
                  <countTo :startVal="0" :endVal="resTop.user_number" :duration="3000" :decimals="0"></countTo>
                </div>
              </div>
              <div class="item">
                <img src="@/assets/images/index/user2.png" />
                <div class="nums">
                  <span>消费总额:</span>
                  <countTo :startVal="0" :endVal="resTop.total_order_money" :duration="3000" :decimals="0"></countTo>
                </div>
              </div>
              <div class="item">
                <img src="@/assets/images/index/user3.png" />
                <div class="nums">
                  <span>消费人数:</span>
                  <countTo :startVal="0" :endVal="resTop.consumers" :duration="3000" :decimals="0"></countTo>
                </div>
              </div>
              <div class="item">
                <img src="@/assets/images/index/user4.png" />
                <div class="nums">
                  <span>商品数量:</span>
                  <countTo :startVal="0" :endVal="resTop.goods_number" :duration="3000" :decimals="0"></countTo>
                </div>
              </div>
              <div class="item">
                <img src="@/assets/images/index/user5.png" />
                <div class="nums">
                  <span>订单数量:</span>
                  <countTo :startVal="0" :endVal="resTop.order_number" :duration="3000" :decimals="0"></countTo>
                </div>
              </div>
            </div>
          </div>
        </el-container>
        <el-container class="index_rank">
          <div class="bk user">
            <div class="title">
              <div class="name">用户消费排行</div>
              <div class="link"><el-link :href="'/shop/statistic/exportUser?Authorization=' + Authorization">导出top100</el-link></div>
            </div>
            <div class="rank">
              <dl>
                <dt>
                  <div class="ranking">排行</div>
                  <div class="name">用户名</div>
                  <div class="num">消费金额</div>
                </dt>
                <dd v-for="(item, i) in rankUser" :key="i">
                  <div class="ranking">{{ i + 1 }}</div>
                  <div class="name">{{ item.nickname }}</div>
                  <div class="num">{{ item.amount }}</div>
                </dd>
                <dd class="empty" v-if="!rankUser.length">暂无数据</dd>
              </dl>
            </div>
          </div>
        </el-container>
        <el-container class="index_rank">
          <div class="bk sale">
            <div class="title">
              <div class="name">商品销售排行</div>
              <div class="link"><el-link :href="'/shop/statistic/exportCommodity?Authorization=' + Authorization">导出top100</el-link></div>
            </div>
            <div class="rank">
              <dl>
                <dt>
                  <div class="ranking">排行</div>
                  <div class="name">商品</div>
                  <div class="num">销量</div>
                </dt>
                <dd v-for="(item, i) in rankProduct" :key="i">
                  <div class="ranking">{{ i + 1 }}</div>
                  <div class="name">{{ item.name }}</div>
                  <div class="num">{{ item.number }} 件</div>
                </dd>
                <dd class="empty" v-if="!rankProduct.length">暂无数据</dd>
              </dl>
            </div>
          </div>
        </el-container>
      </el-col>
    </el-row>
  </el-container>
</template>

<script>
import {Column} from '@antv/g2plot';
import DatePicker from '@/components/DatePicker/index';
import countTo from 'vue-count-to';
import {getShopToken, getToken} from '@/utils/auth';
import {getDataTop, getDataTotal, getDataCount, getDataAgent, getDataUserRank, getDataProductRank, getDataunifiedcount} from '@/api/shop/index';
export default {
  name: 'dashboard',
  data() {
    return {
      isLoading: false,
      isLoadingChart: false,
      obj: {
        //字段(笔单价:avg_money,订单数: total_pay_order_number,订单金额:total_money,客单价:avg_user_money,支付人数:number,新增用户:new_user_number)
        field: 'avg_money',
        begin_date: this.$moment(new Date())
          .add(-7, 'd')
          .format('YYYY-MM-DD')+ '00:00:00',
        end_date: this.$moment(new Date()).format('YYYY-MM-DD')+' 23:59:59',
        date_format: 'day' //day按日显示数据month按月显示数据year按年显示数据
      },
      resTop: {
        consignment: 0, //待发货,
        stay_write_off: 0, //待核销,
        after_sales: 0, //维权订单,
        warehouse: 0, //仓库中,
        sold_out: 0, //售罄,
        user_number: 0, //用户数量,
        today_user_number: 0, //新增用户,
        consumers: 0, //消费人数,
        goods_number: 0, //商品数量,
        order_number: 0, //订单数量,
        agent_total: 0, //分销总人数,
        agent_apply: 0, //待审核的分销商,
        agent_amount: 0, //佣金,
        agent_cash: 0, //待提现的佣金
        agent_confirm: 0,
        total_order_money: 0
        // consignment: 0, //代发货订单
        // user_number: 0, //用户总人数
        // consumers: 0, //消费人数
        // goods_number: 0, //商品数量
        // order_number: 0 //订单数量
      }, //头部数据总数
      todaylist: [
        {
          name: '笔单价(元)',
          icon: 'el-sc-renminbidanjia',
          value: 'today_avg_order_money',
          color: '#FF9A9E',
          bg: '#FFF0F1'
        },
        {
          name: '订单数(单)',
          icon: 'el-sc-dingdan6',
          value: 'today_pay_order_number',
          color: '#A18CD1',
          bg: '#F3EEFF'
        },
        {
          name: '订单金额(元)',
          icon: 'el-sc-jine',
          value: 'today_total_order_money',
          color: '#FFD498',
          bg: '#FFF6E9'
        },
        {
          name: '客单价(元)',
          icon: 'el-sc-kehu-copy',
          value: 'today_avg_user_money',
          color: '#C766AC',
          bg: '#FFF0FB'
        },
        {
          name: '支付人数(人)',
          icon: 'el-sc-zhangdan1',
          value: 'today_consumers',
          color: '#2E68E9',
          bg: '#E4ECFF'
        },
        {
          name: '新增用户(人)',
          icon: 'el-sc-xinzeng',
          value: 'today_user_number',
          color: '#96E6A1',
          bg: '#E7FFEA'
        },
        {
          name: 'PV',
          icon: 'el-sc-yonghu4',
          value: 'pv',
          color: '#667EEA',
          bg: '#E2E7FF'
        },
        {
          name: 'UV',
          icon: 'el-sc-yonghu3',
          value: 'uv',
          color: '#64C8BC',
          bg: '#DEFFFB'
        },
        {
          name: '分裂获客(人)',
          icon: 'el-sc-fenxiang01',
          value: 'today_fission_number',
          color: '#FEA858',
          bg: '#FEF6EE'
        },
        {
          name: '分裂访问(人)',
          icon: 'el-sc-yj',
          value: 'today_fission_click',
          color: '#FFC5C5',
          bg: '#FEF9F9'
        },
        {
          name: '退款单数(单)',
          icon: 'el-sc-tuikuan1',
          value: 'today_refund_number',
          color: '#4ACBD6',
          bg: '#DEFFFB'
        },
        {
          name: '退款金额(元)',
          icon: 'el-sc-tuikuan2',
          value: 'today_refund_money',
          color: '#6554C0',
          bg: '#EEEEF9'
        }
      ],
      unifieddata: {},
      resTotal: {
        refund_number: 0,
        avg_money: 0.0, //笔单价
        total_pay_order_number: 0, //订单数
        total_money: 0.0, //订单金额
        avg_user_money: 0.0, //客单价
        number: 0, //支付人数
        new_user_number: 0, //新增用户
        fission_visit: 0,
        fission_click: 0,
        fission_number: 0,
        pv: 0,
        refund_money: 0,
        uv: 0
      }, //总数对象
      resAgent: {
        total: 0, //分销商总数
        apply: 0, //待审核分销商
        amount: 0.0, //佣金
        agent: 0.0 //待提现佣金
      }, //分销数据对象
      list: [], //图表数据对象
      line: null,
      rankUser: [],
      rankProduct: [],
      Authorization: getShopToken() || getToken()
    };
  },
  components: {
    DatePicker,
    countTo
  },
  created() {
   
    // this.imgwidth=window.outerWidth- 150 - 40
  },
  mounted() {
    //调用默认页面数据
    this.getDataTop();
    this.getDataTotal();
    // this.getDataAgent();
    this.getDataCount();
    this.getDataUserRank();
    this.getDataProductRank();
    this.getDataunifiedcount();
  },
  watch: {
    'obj.date_format': {
      handler: function() {
        this.getDataCount();
      }
    }
  },
  computed: {},
  methods: {
    //选择图表数据类型
    selectField(t) {
      this.obj.field = t;
      this.getDataCount();
    },
    //获取时间
    getTime(value) {
      this.obj.begin_date = value[0] + ' 00:00:00';
      this.obj.end_date = value[1] + ' 23:59:59';
      this.getData();
    },
    //获取统计数据 - 头部
    getDataTop() {
      this.isLoading = true;
      getDataTop()
        .then(res => {
          this.isLoading = false;
          let o = res.msg;
          for (let key in o) {
            this.resTop[key] = Number(o[key]);
          }
          // this.resTop.consignment = Number(o.consignment);
          // this.resTop.user_number = Number(o.user_number);
          // this.resTop.consumers = Number(o.consumers);
          // this.resTop.goods_number = Number(o.goods_number);
          // this.resTop.order_number = Number(o.order_number);
        })
        .catch(e => {
          this.isLoading = false;
        });
    },
    //获取统计数据 - 图表总数
    getDataTotal() {
      let _o = {...this.obj};
      //删除无用字段
      delete _o.date_format;
      delete _o.field;

      this.isLoading = true;
      getDataTotal(_o)
        .then(res => {
          this.isLoading = false;
          let o = res.msg;
          for (let key in o) {
            this.resTotal[key] = Number(o[key]);
          }
          // this.resTotal.avg_money = Number(o.avg_money);
          // this.resTotal.avg_user_money = Number(o.avg_user_money);
          // this.resTotal.number = Number(o.number);
          // this.resTotal.total_money = Number(o.total_money);
          // this.resTotal. total_pay_order_number = Number(o. total_pay_order_number);
          // this.resTotal.new_user_number = Number(o.new_user_number);
        })
        .catch(e => {
          this.isLoading = false;
        });
    },
    //获取统计数据 - 图表
    getDataCount() {
      let _o = {...this.obj};
      this.isLoadingChart = true;
      getDataCount(_o)
        .then(res => {
          this.isLoadingChart = false;
          let o = res.msg;
          //遍历处理数据
          this.list = [];
          for (let i in o) {
            let v = '';
            switch (_o.field) {
              case ' total_pay_order_number':
              case 'number':
              case 'new_user_number':
                v = parseInt(o[i][this.obj.field]);
                break;
              default:
                v = o[i][this.obj.field];
                break;
            }

            this.list.push({
              date: i,
              value: Number(v)
            });
          }
          this.renderChart();
        })
        .catch(e => {
          this.isLoadingChart = false;
        });
    },
    //获取统计数据 - 分销
    getDataAgent() {
      this.isLoading = true;
      getDataAgent()
        .then(res => {
          this.isLoading = false;
          let o = res.msg;
          this.resAgent.total = Number(o.total);
          this.resAgent.apply = Number(o.apply);
          this.resAgent.amount = Number(o.amount);
          this.resAgent.agent = Number(o.agent);
        })
        .catch(e => {
          this.isLoading = false;
        });
    },
    //获取统计数据 - 用户消费排名
    getDataUserRank() {
      this.isLoading = true;
      getDataUserRank().then(res => {
        this.isLoading = false;
        this.rankUser = res.msg;
      });
    },
    //获取统计数据 - 商品销量排名
    getDataProductRank() {
      this.isLoading = true;
      getDataProductRank().then(res => {
        this.isLoading = false;
        this.rankProduct = res.msg;
      });
    },
    //今日数据搜索
    getDataunifiedcount() {
      getDataunifiedcount({}).then(res => {
        this.unifieddata = res.msg;
      });
    },
    //查询数据
    getData() {
      this.getDataCount();
      this.getDataTotal();
    },
    //封装chart
    renderChart() {
      let s = '';
      switch (this.obj.field) {
        case 'avg_money':
          s = '笔单价';
          break;
        case ' total_pay_order_number':
          s = '订单数';
          break;
        case 'total_money':
          s = '订单金额';
          break;
        case 'avg_user_money':
          s = '客单价';
          break;
        case 'number':
          s = '支付人数';
          break;
        case 'new_user_number':
          s = '新增用户';
          break;
        case 'pv':
          s = 'PV';
          break;
        case 'uv':
          s = 'UV';
          break;
        case 'fission_number':
          s = '分裂人数';
          break;
        case 'fission_click':
          s = '分裂点击';
          break;
        case 'refund_number':
          s = '退款单数';
          break;
        case 'refund_money':
          s = '退款金额';
          break;
        default:
          s = '';
          break;
      }
      let data = this.list;
      let option = {
        data,
        xField: 'date',
        yField: 'value',
        meta: {
          value: {
            alias: s
          }
        },
        // height:300,
        padding: [20, 50],
        // tooltip: {
        //   showTitle: true,
        //   showCrosshairs: true
        //   //itemTpl:'123213'
        // },
        minColumnWidth: 10,
        maxColumnWidth: 10,
        color: '#FEA858',
        columnStyle: {
          radius: [20, 20, 20, 20],
          lineWidth: 1
          // shadowColor: '#3456DC',
          // shadowBlur: 4,
          // shadowOffsetY: 5
        }
      };

      if (this.line) {
        this.line.update(option);
      } else {
        this.line = new Column('dcs', option);
      }
      this.line.render();
    }
  }
};
</script>

<style lang="scss" scoped>
//头部样式
.index_header {
  padding: 20px 0;
  // overflow: hidden;
  // background: #fff;
  // display: flex;
  // justify-content: space-around;
  .item {
    // width: 20%;
    // flex: 1;
    width: calc((100% - 80px) / 5);
    float: left;
    display: flex;
    // padding: 10px 0;
    justify-content: center;
    position: relative;
    align-items: flex-start;
    margin: 0 10px;

    &:first-child {
      margin-left: 0;
      box-shadow: 0px 0px 13px 0px rgba(52, 86, 220, 0.2);
    }
    &:nth-child(2) {
      box-shadow: 0px 0px 13px 0px rgba(255, 197, 197, 0.2);
    }
    &:nth-child(3) {
      box-shadow: 0px 0px 13px 0px rgba(254, 168, 88, 0.2);
    }
    &:nth-child(4) {
      box-shadow: 0px 0px 13px 0px rgba(101, 84, 192, 0.2);
    }
    &:nth-child(5) {
      margin-right: 0;
      box-shadow: 0px 0px 13px 0px rgba(100, 200, 188, 0.2);
    }
    // width: calc((100vw - 190px)/5);
    // border-right: 1px solid #f2f6fc;
    img {
      position: relative;
      width: 100%;
      image-rendering: -moz-crisp-edges;
      image-rendering: -o-crisp-edges;
      image-rendering: -webkit-optimize-contrast;
      image-rendering: crisp-edges;
      -ms-interpolation-mode: nearest-neighbor;
    }
    // background:url('../../../assets/images/index/Shape1.png');
    &:last-child {
      border-right: 0;
    }

    .icon {
      font-size: 50px;
      margin-right: 20px;
    }

    .data {
      display: flex;
      flex-direction: column;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      div {
        flex: 1;
        display: flex;
        align-items: flex-end;
        padding-left: 15%;
      }
      .name {
        font-size: 14px;
        color: #5e6c84;
      }

      .num {
        color: #344563;
        margin-bottom: 1vw;
        // margin-top: 10px;
        font-weight: bold;
        ::v-deep .el-link--inner {
          font-size: 2vw;
        }
      }
    }
  }
}

//主表格区域
.index_main {
  padding: 0;
  flex-direction: column;
  margin-top: 20px;
  background: #fff;

  .main_header {
    display: flex;
    justify-content: space-between;
    padding: 20px 0;

    .title {
      font-size: 16px;
      padding-left: 20px;
      line-height: 36px;
    }

    .filter {
      padding-right: 20px;
      display: flex;
      .switch_tab {
        width: 282px;
        height: 36px;
        background: #fbfdff;
        border: 1px solid #e9edf0;
        box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.04);
        border-radius: 7px;
        display: flex;
        span {
          flex: 1;
          text-align: center;
          line-height: 36px;
          cursor: pointer;
          font-weight: bold;
          &.active {
            color: #fea858;
          }
        }
        span:nth-child(2) {
          display: flex;
          justify-content: space-between;
          align-items: center;
          &::after {
            content: '';
            display: block;
            width: 1px;
            height: 24px;
            background: #e9edf0;
          }
          &::before {
            content: '';
            display: block;
            width: 1px;
            height: 24px;
            background: #e9edf0;
          }
        }
      }
    }
  }

  .main_cates {
    // border:1px solid #EBEEF5;
    margin: 0 20px 20px;

    .cates {
      display: flex;

      .cate {
        // float: left;
        display: flex;
        // flex: 1;
        flex-direction: column;
        // height: 100px;
        // padding: 20px 0 0 20px;
        // border: 1px solid #ebeef5;
        cursor: pointer;
        width: 108px;
        height: 87px;
        background: #f9f9f9;

        margin-left: 18px;
        box-sizing: border-box;
        align-items: center;
        justify-content: center;
        color: #344563;
        border: 2px solid #f9f9f9;
        // &:nth-child(n + 1) {
        //   border-right: 1px solid transparent;
        // }

        // &:last-child {
        //   border-right: 1px solid #ebeef5;
        // }

        &:hover {
          border: 2px solid #fea858;
        }

        &.selected {
          border: 2px solid #fea858;
          background: #fea858;
          box-shadow: 0px 5px 16px 0px rgba(254, 168, 88, 0.56);
          color: #ffffff;
          // border: 1px solid #409eff;
        }

        .name {
          font-size: 13px;
          // color: #606266;
        }

        .num {
          font-size: 14px;
          font-weight: 500;
          margin-top: 13px;
          // color: #303133;
        }
      }
    }

    .charts {
      border: 1px solid #ebeef5;
      border-top: 0;
      margin: 30px 0;

      .dcs {
        width: 100%;
        height: 300px;
      }
    }
  }
  .todaydata {
    display: flex;
    flex-wrap: wrap;
    margin-top: 40px;
    .item {
      width: 25%;
      display: flex;
      align-items: center;
      margin-bottom: 60px;
      .t_icon_box {
        width: 80px;
        height: 80px;
        background: #fef6ee;
        border-radius: 50%;
        text-align: center;
        line-height: 80px;
        i {
          // width: 80px;
          // height: 80px;
          font-size: 40px;
        }
      }
      .text_box {
        margin-left: 20px;
        display: flex;
        flex-direction: column;
        span:first-child {
          font-size: 16px;
          color: #999999;
        }
        span:last-child {
          font-size: 22px;
          color: #333333;
          font-weight: bold;
          margin-top: 10px;
        }
      }
    }
  }
}

//分销数据
.index_agent {
  padding: 0;
  background: #fff;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  padding: 0 20px 20px 20px;
  .title {
    padding: 20px 0;
    font-size: 28px;
    color: #344563;
  }
  .content {
    // display: flex;
    width: 100%;
    .item {
      width: calc((100% - 80px) / 5);
      display: flex;
      float: left;
      // flex: 1;
      flex-direction: column;
      background: #fff;
      margin-left: 20px;
      position: relative;
      img {
        width: 100%;
        image-rendering: -moz-crisp-edges;
        image-rendering: -o-crisp-edges;
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
        -ms-interpolation-mode: nearest-neighbor;
      }
      &:first-child {
        margin-left: 0;
      }
      .data {
        display: flex;
        flex-direction: column;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        justify-content: flex-end;
        .num {
          color: #909399;
          // height: 60px;
          line-height: 1;
          justify-content: center;
          // height: 50%;
          color: #fff;
          display: flex;
          align-items: flex-end;
          margin-bottom: 1.5vw;
          > span {
            font-size: 14px;
            line-height: 1.4;
          }
          ::v-deep .el-link--inner {
            font-size: 40px;
            color: #fff;
            span {
              display: inline-block;
            }
          }
        }
      }
    }
  }
}

//排行榜
.index_rank {
  padding: 0;
  margin: 20px 0 0;
  display: flex;

  .bk {
    flex: 1;
    background: #fff;
    padding: 20px;
    // height: 620px; //10条记录高度
    overflow: hidden;

    &.sale {
      // margin-left: 20px;
    }

    .title {
      display: flex;
      justify-content: space-between;

      .name {
        //no css
      }

      .link {
        //no css
      }
    }

    .rank {
      .item {
        padding-top: 15px;
        img {
          width: 60px;
          height: 60px;
          // background: red;
          margin: 15px 0;
          margin-right: 20px;
        }
        display: flex;
        align-items: center;
        div {
          font-size: 17px;
          span:first-child {
            color: #8691a3;
            font-size: 17px;
          }
          ::v-deep .el-link--inner {
            span {
              color: #344563;
            }
          }
        }
      }
      dl {
        margin: 0;
        margin-top: 20px;
        dt {
          border-bottom: 1px solid #e4e7ed;
        }
        dt,
        dd {
          display: flex;

          font-size: 14px;
          .ranking {
            width: 60px;
            text-align: center;
          }

          .name {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            word-break: break-all;
            flex: 1;
          }

          .num {
            width: 100px;
            text-align: right;
          }
        }

        dt {
          height: 40px;
          line-height: 40px;
        }

        dd {
          margin: 0;
          height: 40px;
          line-height: 40px;

          &:last-child {
            border-bottom: 0;
          }

          &.empty {
            justify-content: center;
          }
        }
      }
    }
  }
}
</style>
